<template>
  <div class="Replytobox">
    <div style="display: flex">
      <div v-if="zdata?.url">
        <el-avatar shape="square" :size="50" :src="zdata?.url" />
      </div>
      <div style="width: 100%; margin-top: 10px">
        <el-input v-model="comment" size="large" :placeholder="placeholder">
        </el-input>
        <div class="zzybutton">
          <el-button type="primary" @click="issue">发布</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script >
import { defineComponent, ref } from "vue";
import { useStore } from "vuex";

export default defineComponent({
  components: {},
  props: {
    zdata: {
      type: Object,
      default: () => {},
    },
    placeholder: {
      type: String,
      default: "",
    },
    commentinfo: {
      type: Number,
      default: () => {},
    },
  },
  setup(props) {
    const store = useStore();
    //测试数据
    const comment = ref();

    const issue = () => {
      const zzycomment = comment.value;
      store.dispatch("comment/setcomment", {
        ...props.commentinfo,
        zzycomment,
        articleid: props.zdata[0].articleid,
      });
      comment.value = "";
    };
    return { issue, comment };
  },
});
</script>

<style scoped lang="less">
.Replytobox {
  width: 80%;
  position: absolute;
  left: 30px;
  bottom: 1px;
  clear: both;
  .zzybutton {
    position: absolute;
    right: -90px;
    bottom: 3px;
  }
}
</style>
